<div ng-if="vm.ShowControls" ng-include="'app/layout/FABGoBack.html'"></div>
<section id="diagnosis-view" class="mainbar layout layout-wrap referralviewblock" layout="column" layout-align="space-around" >
    <br />
    <div class="layout layout-wrap" layout="row" layout-align="center center" flex="90">
        <md-card class="layout layout-fill md-whiteframe-9dp DemoCard" flex="90">
            <md-card-content>
                <md-toolbar class="layout-wrap flex">
                    <h3 class="Padding10">Patient Diagnosis</h3>
                </md-toolbar>
                <form name="PatientDiagnosisForm">

                    <!--<md-toolbar class="md-table-toolbar md-default">
                        <div class="md-toolbar-tools">
                            <span>ICD10 Diagnosis Codes</span>
                        </div>
                    </md-toolbar>-->

                   <h3>Selected Diagnosis</h3>
                    <md-chips ng-model="vm.SelectedCodes" name="SelectedDiagnosis" readonly="vm.ReadOnly">
                        <md-chip-template>
                            <em>{{$chip}}</em>
                        </md-chip-template>
                    </md-chips>
                   
                    <div class="md-actions" layout="row" layout-align="space-between center">
                        <md-input-container class="md-icon-float md-block md-accent inputValidation" flex>
                            <label>Diagnosis Code / Name</label>
                            <input required ng-model="vm.SearchText" name="SeachText" minlength="3" maxlength="100">
                            <div ng-messages="PatientDiagnosisForm.SeachText.$error" role="alert">
                                <div ng-message-exp="['required', 'minlength', 'maxlength']">
                                    Type atelaset 3 characters and hit search to find diagnosis
                                </div>
                            </div>
                        </md-input-container>
                        <md-button class="md-raised md-primary" ng-click="vm.SerchDiagnosis()" ng-disabled="PatientDiagnosisForm.$invalid">Search Diagnosis</md-button>
                    </div>
                    <md-table-container>
                        <table md-table md-row-select md-auto-select ng-model="vm.SelectedCodes" md-progress="promise">
                            <thead md-head>
                                <tr md-row>
                                    <th md-column><span>ICD10 Diagnosis Code</span></th>
                                    <th md-column><span>Long Description</span></th>
                                    <!--<th md-column>Short Description</th>-->
                                </tr>
                            </thead>
                            <tbody md-body>
                                <tr md-row md-select="code.ChipItem" md-select-id="{{code.DiagnosisID}}" md-auto-select ng-repeat="code in vm.DiagnosisCodes" >
                                    <td md-cell>{{code.ICD10Code}}</td>
                                    <td md-cell>{{code.LongDescription}}</td>
                                    <!--<td md-cell>{{code.ShortDescription}}</td>-->
                                </tr>
                            </tbody>
                        </table>
                    </md-table-container>

                    <md-table-pagination md-limit="10" md-limit-options="[10]" md-page="1" md-total="{{vm.TotalDiagnosis}}" md-on-paginate="vm.onPaginate" md-page-select></md-table-pagination>

                    <md-input-container class="md-icon-float md-block md-accent">
                        <label>Diagnosis Notes</label>
                        <textarea ng-model="vm.DiagnosisNotes" type="text" name="Notes" rows="5"></textarea>
                    </md-input-container>

                    <md-card-footer>
                        <br/>
                         <div class="md-actions" layout="row" layout-align="space-around center">
                            <md-button style="float:right;" class="md-raised md-primary md-accent" ng-click="vm.SaveDiagnosis()" >SAVE</md-button>
                        </div>
                    </md-card-footer>
                </form>
            </md-card-content>
        </md-card>
        <br /><br />
</div>
</section>